<!DOCTYPE html>
<html class=''>
<head>
    <title>天猫大图鼠标滑动特效</title>
	<script src='//assets.codepen.io/assets/editor/live/console_runner-d0a557e5cb67f9cd9bbb9673355c7e8e.js'></script>
	<script src='//assets.codepen.io/assets/editor/live/events_runner-21174b4c7273cfddc124acb0876792e0.js'>
	</script>
	<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.11.0.min.js"></script>
	<script src='//assets.codepen.io/assets/editor/live/css_live_reload_init-7618a0de08795409d8f6c9ef6805f7b2.js'></script>
    <meta charset='UTF-8'>
  	<meta name="robots" content="noindex">
    <link rel="canonical" href="http://codepen.io/uNiverselEgacy/pen/szqyG" />
    <script src='//codepen.io/assets/libs/prefixfree.min.js'></script>
    <style class="cp-pen-styles">
			* {
			  margin: 0;
			  padding: 0;
			}

			ul {
			  list-style: none;
			}

			.slider {
			  position: relative;
			  width: 1190px;
			  height: 320px;
			}

			.slider .slider-nav {
			  width: 1192px;
			}

			.slider .nav {
			  position: relative;
			  float: left;
			  height: 320px;
			  width: 190px;
			  overflow: hidden;
			  margin-right: 2px;
			  transition: width .3s ease-out;
			}

			.slider .nav-selected {
			  width: 806px;
			}

			.slider .nav .type {
			  position: relative;
			  z-index: 1;
			}

			.slider .nav .content {
			  position: absolute;
			  top: 0;
			  right: 0;
			}

			.slider .nav img {
			  border: 0;
			}

			.slider .nav-1 .arrow {
			  border-color: transparent #a4c7cb;
			}

			.slider .nav-2 .arrow {
			  border-color: transparent #b3aeac;
			}

			.slider .nav-3 .arrow {
			  border-color: transparent #d6c5aa;
			}

			.slider .arrow {
			  position: absolute;
			  left: 190px;
			  top: 30px;
			  z-index: 2;
			  border-style: solid;
			  border-width: 12px 0 12px 12px;
			}
	   </style>

</head>
<body>
<div class="slider">
  <ul class="slider-nav">
    <li class="nav nav-1  nav-selected">
      <b class="arrow"></b>
      <a>
        <img class="type" src="http://gtms01.alicdn.com/tps/i1/TB1No0yFVXXXXXNXFXXiJZi2pXX-190-320.jpg" width="190" height="320" />
        <img class="content" src="http://gtms02.alicdn.com/tps/i2/TB1aOdyFVXXXXc6XFXXn..oQFXX-616-320.jpg" width="616" height="320" />
      </a>
    </li>
    
    <li class="nav nav-2">
      <b class="arrow"></b>
      <a>
        <img class="type" src="http://gtms03.alicdn.com/tps/i3/TB1QFpzFVXXXXblXpXXiJZi2pXX-190-320.jpg" width="190" height="320" />
        <img class="content" src="http://gtms01.alicdn.com/tps/i1/TB15f4hFVXXXXXFXpXXn..oQFXX-616-320.jpg" width="616" height="320" />
      </a>
    </li>
    
    <li class="nav nav-3">
      <b class="arrow"></b>
      <a>
        <img class="type" src="http://gtms01.alicdn.com/tps/i1/TB1n98dFVXXXXbSXpXXiJZi2pXX-190-320.jpg" width="190" height="320" />
        <img class="content" src="http://gtms04.alicdn.com/tps/i4/TB132gWFFXXXXchaVXXYw2ERVXX-618-320.jpg" width="616" height="320" />
      </a>
    </li>
  </ul>
</div>
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script>
<script>var navs = $('.slider .slider-nav .nav');
navs.each(function () {
    $(this).mouseover(function () {
        navs.each(function () {
            $(this).removeClass('nav-selected');
        });
        $(this).addClass('nav-selected');
    });
});
//# sourceURL=pen.js
</script>
</body></html>